<template>
  <div style="padding:10px">
      <div style="margin:10px">
          <el-button type="primary" @click="add">新增</el-button>
          
      </div>
  
     <div style="margin:10px">
      <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
          prop="id"
          label="序号"
          
          >
          </el-table-column>
          <el-table-column
          prop="name"
          label="信息平台名称"
          
          >
          </el-table-column>
          <el-table-column
          prop="url"
          label="信息平台地址"
  
          >
          </el-table-column>
  
          <el-table-column
         
          label="信息平台图片"
          >
          <template slot-scope="scope">
          <a :href="scope.row.url">
            <el-image 
              style="width:100px;height:100px"
              :src="scope.row.img"
              
            >
            
            </el-image>
          </a> 
          </template>
          </el-table-column>
  
          <el-table-column
          prop="status"
          label="状态"
          >
          </el-table-column>

          <el-table-column
          fixed="right"
          label="操作"
          width="200">
          <template slot-scope="scope">
              <el-button @click="handleEdit(scope.row)" type="button" size="mini">编辑</el-button>
              
              <el-popconfirm @confirm="handleDelete(scope.row)" title="这是一段内容确定删除吗？">
          
                <el-button  slot="reference" type="danger" size="mini">删除</el-button>
      
              </el-popconfirm>  
          </template>
          </el-table-column>
      </el-table>

      <!-- 新增表 -->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="40%">
        <el-form :model="form" label-width="120px" >
          
          <el-form-item label="信息平台名称" >
            <el-input v-model="form.name" style="width:80%"></el-input>
          </el-form-item>

          <el-form-item label="信息平台地址" >
            <el-input v-model="form.url" style="width:80%"></el-input>
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="form.status" placeholder="" style="width:80%">
              <el-option label="启用" value="启用"></el-option>
              <el-option label="禁用" value="禁用"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="信息平台图片" prop="img">
            <el-upload
              action="http://192.168.85.140:8080/upload"
              ref="upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :on-success="handleAvatarSuccess"
              :limit="1"
              list-type="picture"
              :on-exceed="handleExceed"
              :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
  </template>
  
  <script>
  
    export default {
      data() {
      
        return {
          dialogVisible:false,
          search:'',
          currentPage:1,
          pageSize:10,
          total:10,
          fileList:[],
          gettime: "",
          form:{
           
          },
          tableData: [
          ],
         

        }
      },
      mounted() {
        this.load()
        
      },
      methods:{
          load(){
            this.$Ajax.post("getInformationInfo",this.form).then(res =>{
            console.log(res),
            this.tableData = res.data.rows
          })
          },
          add(){
            this.dialogVisible=true
            this.form={}
            this.$refs['upload'].clearFiles()
            
          },
          save(){
            if(this.form.id){//更新
              this.$Ajax.post("modifyInformationInfoById",this.form).then((result) => {
                console.log("result");
                if(result.data.flag == true){
                  this.$message({
                    type:"success",
                    message:result.data.message
                  })
                }else{
                  this.$message({
                    type:"error",
                    message:result.data.message
                  })
                }
                this.load()//刷新表格数据
                this.dialogVisible = false //关闭弹窗
              })
            }else{ //新增
              this.$Ajax.post("insertInformationInfo",this.form).then((result) => {
                if(result.data.flag == true){
                  this.$message({
                    type:"success",
                    message:result.data.message
                  })
                }else{
                  this.$message({
                    type:"error",
                    message:result.data.message
                  })
                }
                this.load()//刷新表格数据
                this.dialogVisible = false //关闭弹窗
              })
            }
          },
            
          
          handleEdit(row){
              this.form = JSON.parse(JSON.stringify(row))
              this.dialogVisible = true
              this.$nextTick(() => {
                this.$refs['upload'].clearFiles()
              })
              
          },
          handleDelete(row){
            console.log(row);
            this.$Ajax.post("deleteInformationById",row).then((result) => {
                if(result.data.flag == true){
                  this.$message({
                    type:"success",
                    message:result.data.message
                  })
                }else{
                  this.$message({
                    type:"error",
                    message:result.data.message
                  })
                }
                this.load()//刷新表格数据
                this.dialogVisible = false //关闭弹窗
              })
          },
        
          handleRemove(file, fileList) {
            console.log(file, fileList);
          },
          handlePreview(file) {
            console.log(file);
          },
         
          
          handleRemove(file, fileList) {
            console.log(file, fileList);
          },
          handlePreview(file) {
            window.open(file.response.url)
            console.log(file);
          },
          handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
          },
          beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
          },
          handleAvatarSuccess(res) {
            this.form.img = res
          }
      },
    }
  </script>
  
  <style>
  
  </style>